<template>
    <div>
        <h1>房型添加</h1>
        <table>
            <tr>
                <td>名称</td>
                <td><input type="text"  v-model="state.mname"/></td>
            </tr>
            <tr>
                <td>数量</td>
                <td><input type="text" v-model="state.mnum"/></td>
            </tr>
    
            <tr>
                <td>简介</td>
                <td>
                    <input type="text" v-model="state.mjianjie"/>
                </td>
            </tr>
            <tr>
                <td>图片</td>
                <td>
                    <input type="file" @change="shang">
                    <img :src="src" alt="" width="100px" height="100px" v-if="src!=''"/>
                </td>
            </tr>
            <tr>
                <td>时间</td>
                <td>
                    <input type="date" v-model="state.mdatetime"/>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="添加" @click="tianjia" />
                
                </td>
                <td></td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import {  reactive, onMounted,toRefs} from 'vue'
import { useRoute,useRouter} from 'vue-router'
import axios from 'axios'
const route = useRoute()
const router = useRouter()

const data= reactive({
    state:{
        mname:'',
        mnum:'',
        mjianjie:'',
        mtupian:'',
        mdatetime:'',
    },
    src:''
})

    


const {state,src} = toRefs(data)

const shang = (e:any)=>{
    let file = e.target.files[0]
    let from = new FormData()
    from.append('file',file)
    axios({
        url:'https://localhost:7006/api/image/TP',
        method:'post',
        data:from
    }).then((res)=>{
        console.log(res)
        src.value=res.data.data
        state.value.mtupian = res.data.data
    })
}

const tianjia = ()=>{
    axios({
        url:'https://localhost:7006/api/Member/addMember',
        method:'post',
        data:state.value
        
    }).then((res)=>{
        console.log(res)
       if(res.data.data>0){
           alert('添加成功')
           router.push('/memberlist')
       }else{
           alert('添加失败')
       }
    })
}

</script>

<style scoped>

</style>